import './index.less';
import { Grid } from 'react-vant';
import { staticModeList, deviceId } from '../../utils/staticData';
import { useEffect, useState } from 'react';
import SvgIcon from '../../components/SvgIcon/index';
import { debounce } from '../../utils/utils';

export default function Mode({ props, onModeChange, onLoopClick }: any) {
  const Hejia = (window as any).Hejia;

  const { mode, isOnline, appointment, status, fault } = props;
  const [selectedItemId, setSelectedItemId] = useState<number | null>(null);

  useEffect(() => {
    setSelectedItemId(mode);
  }, [mode]);

  /**
   * Handles the click event for the mode.
   *
   * @param {number} id - The id of the mode.
   * @return {void} This function doesn't return anything.
   */
  const handleModeClick = (id: number): void => {
    if (id === selectedItemId) return;

    onLoopClick(false);
    setSelectedItemId(id);
    onModeChange(id);

    debounce(() => {
      Hejia.setControlParam(
        {
          // deviceId,
          parameters: {
            param: [
              {
                name: 'mode',
                content: id
              }
            ]
          }
        },
        function () {
          // success, no response
          setTimeout(() => {
            onLoopClick(true);
          }, 2000);
          console.log('success');
        },
        function (msg: string, obj: any) {
          onLoopClick(true);
          console.log(msg + obj.resultCode + obj.resultCodeMessage);
        }
      );
    }, 300)();
  };

  return (
    <div className="mode">
      <div
        className={
          !isOnline ||
            fault > 0 ||
            [1, 2, 3].includes(status) ||
            (status == 0 && appointment > 0)
            ? 'offline-title'
            : 'title'
        }
      >
        模式
      </div>
      <div className="mask-wapper">
        {(!isOnline ||
          fault > 0 ||
          (status == 0 && appointment > 0) ||
          [1, 2, 3].includes(status)) && <div className="mask"></div>}
        <Grid columnNum={4} border={false}>
          {staticModeList.map(item => (
            // react传递参数必须是回调函数
            <Grid.Item key={item.id} onClick={() => handleModeClick(item.id)}>
              <div
                className={`item ${item.id === selectedItemId ? 'active' : ''}`}
              >
                <SvgIcon
                  name={`${item.svg}`}
                  size="48"
                  color={`${item.id === selectedItemId
                    ? 'var(--primary-color)'
                    : 'var(--title-color)'
                    }`}
                />
                <span
                  style={{
                    color:
                      item.id === selectedItemId
                        ? 'var(--primary-color)'
                        : 'var(--title-color)'
                  }}
                >
                  {item.title}
                </span>
              </div>
            </Grid.Item>
          ))}
        </Grid>
      </div>
    </div>
  );
}
